<template>
  <div class="breadcrumb-container" v-if="breadcrumbs.length > 0">
    <el-breadcrumb :separator="separator" class="app-breadcrumb">
      <el-breadcrumb-item 
        v-for="(item, index) in breadcrumbs" 
        :key="index"
        :to="item.path && index < breadcrumbs.length - 1 ? item.path : undefined"
        :class="{
          'is-active': index === breadcrumbs.length - 1,
          'is-clickable': item.path && index < breadcrumbs.length - 1
        }"
      >
        <!-- 图标 -->
        <el-icon v-if="item.icon" class="breadcrumb-icon">
          <component :is="item.icon" />
        </el-icon>
        
        <!-- 首页图标 -->
        <el-icon v-else-if="index === 0 && showHomeIcon" class="breadcrumb-icon">
          <House />
        </el-icon>
        
        <!-- 标题 -->
        <span class="breadcrumb-title">{{ item.title }}</span>
        
        <!-- 自定义内容插槽 -->
        <slot 
          :name="`item-${index}`" 
          :item="item" 
          :index="index" 
          :isLast="index === breadcrumbs.length - 1"
        />
      </el-breadcrumb-item>
    </el-breadcrumb>
    
    <!-- 操作按钮区域 -->
    <div class="breadcrumb-actions" v-if="$slots.actions">
      <slot name="actions" />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { House } from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'

// Props
const props = defineProps({
  // 自定义面包屑数据
  items: {
    type: Array,
    default: () => []
  },
  // 分隔符
  separator: {
    type: String,
    default: '/'
  },
  // 是否显示首页图标
  showHomeIcon: {
    type: Boolean,
    default: true
  },
  // 是否使用路由自动生成面包屑
  autoGenerate: {
    type: Boolean,
    default: true
  },
  // 最大显示层级
  maxLevel: {
    type: Number,
    default: 5
  },
  // 是否显示根路径
  showRoot: {
    type: Boolean,
    default: true
  }
})

const appStore = useAppStore()

// 计算属性
const breadcrumbs = computed(() => {
  let items = []
  
  if (props.items.length > 0) {
    // 使用自定义面包屑数据
    items = props.items
  } else if (props.autoGenerate) {
    // 使用 store 中的面包屑数据
    items = appStore.breadcrumbs || []
  }
  
  // 过滤掉空项
  items = items.filter(item => item && item.title)
  
  // 限制最大层级
  if (items.length > props.maxLevel) {
    const firstItem = items[0]
    const lastItems = items.slice(-(props.maxLevel - 2))
    items = [
      firstItem,
      { title: '...', path: null, icon: null },
      ...lastItems
    ]
  }
  
  return items
})
</script>

<style lang="scss" scoped>
.breadcrumb-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  
  .app-breadcrumb {
    flex: 1;
    
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        display: flex;
        align-items: center;
        color: var(--el-text-color-regular);
        font-weight: 400;
        transition: color 0.3s ease;
        
        &.is-link {
          color: var(--el-text-color-primary);
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }
      
      &:last-child {
        .el-breadcrumb__inner {
          color: var(--el-text-color-primary);
          font-weight: 500;
        }
      }
      
      .el-breadcrumb__separator {
        color: var(--el-text-color-placeholder);
        margin: 0 8px;
      }
    }
    
    .breadcrumb-icon {
      margin-right: 4px;
      font-size: 14px;
    }
    
    .breadcrumb-title {
      font-size: 14px;
    }
    
    .is-active {
      .breadcrumb-title {
        color: var(--el-color-primary);
        font-weight: 500;
      }
    }
    
    .is-clickable {
      cursor: pointer;
      
      &:hover {
        .breadcrumb-title {
          color: var(--el-color-primary);
        }
      }
    }
  }
  
  .breadcrumb-actions {
    margin-left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .breadcrumb-container {
    padding: 8px 0;
    
    .app-breadcrumb {
      :deep(.el-breadcrumb__item) {
        .el-breadcrumb__inner {
          font-size: 13px;
        }
        
        .el-breadcrumb__separator {
          margin: 0 6px;
        }
      }
      
      .breadcrumb-icon {
        font-size: 12px;
        margin-right: 2px;
      }
      
      .breadcrumb-title {
        font-size: 13px;
      }
    }
    
    .breadcrumb-actions {
      margin-left: 12px;
    }
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .breadcrumb-container {
    .app-breadcrumb {
      :deep(.el-breadcrumb__item) {
        .el-breadcrumb__inner {
          &.is-link:hover {
            color: var(--el-color-primary-light-3);
          }
        }
        
        &:last-child {
          .el-breadcrumb__inner {
            color: var(--el-text-color-primary);
          }
        }
      }
      
      .is-active {
        .breadcrumb-title {
          color: var(--el-color-primary-light-3);
        }
      }
      
      .is-clickable {
        &:hover {
          .breadcrumb-title {
            color: var(--el-color-primary-light-3);
          }
        }
      }
    }
  }
}
</style>